<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>支付</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css/iconfont/iconfont.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="/css/cart1.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/style.css"/>
</head>

<body class="graybg-theme">
<!--头部-->
<div class="topper">
    <div class="wrapper">
        <div class="left-bar">
            <div class="back-home divider">
                <em></em><a href="index.html">商城首页</a>
            </div>
            <div class="item"><a href="">商家中心</a></div>
        </div>
        <div class="right-bar">
            <div class="login-user sub-menu">
                <a class="menu-hd" href="">txtangxia<em></em></a>
                <div class="down">
                    <a href="">内容</a>
                    <a href="">内容</a>
                    <a href="">内容</a>
                </div>
            </div>
            <div class="item"><a href="">消息（<span class="txt-theme">0</span>）</a></div>
            <div class="logout divider"><a href="">退出</a></div>
            <span class=""></span>
            <div class="cart"><em></em><a href="">购物车<span class="txt-theme">2</span>件</a></div>
            <div class="order"><em></em><a href="">我的订单</a></div>
            <div class="fav"><em></em><a href="">我的收藏</a></div>
            <div class="help"><em></em><a href="">帮助中心</a></div>
        </div>
    </div>
</div>
<div class="cart-header wrapper">
    <div class="logo">
        <a href="/index"><img src="/img/logo-mi.png" style="width: 70px; height: 70px" alt="logo"/></a>
    </div>
    <div class="step-box">
        <div class="row">
            <div class="step first active col-3">
                <span class="num">1</span><span class="line"></span><span class="label">我的购物车</span>
            </div>
            <div class="step active col-3">
                <span class="num">2</span><span class="line"></span><span class="label">确认订单信息</span>
            </div>
            <div class="step active col-3">
                <span class="num">3</span><span class="line"></span><span class="label">选择支付方式</span>
            </div>
            <div class="step last col-3">
                <span class="num">4</span><span class="line"></span><span class="label">完成付款</span>
            </div>
        </div>
    </div>
</div>
<!--头部-->

<div class="wrapper">
    <div class="pay-wrap">
        <div class="order-result">
            <div class="section clearfix">
                <img src="/img/order-success.jpg" class="ico"/>
                <div class="titbox">
                    <div class="tit">订单提交成功，应付金额 <span th:text="${orderPay.price}"></span> 元</div>
                    <div class="stit">订单号：<span th:text="${orderPay.code}"></span> 请您在 1 日 内完成支付，否则订单会被自动取消
                    </div>
                </div>
                <div class="mt20">
                    <div class="meta">
                        <div class="hd">商品</div>
                        <div class="bd">
                            <div th:each="p : ${orderPay.cartVOS}">
                                <span th:text="${p.name}"></span> * <span th:text="${p.amount}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="meta">
                        <div class="hd">收货地址</div>
                        <div class="bd"><span
                                th:text="${orderPay.orderLocation.province + orderPay.orderLocation.city + orderPay.orderLocation.area + orderPay.orderLocation.address}"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pay-wrap-tit">
        在线支付
    </div>
    <div class="pay-wrap">
        <div class="pay-way">
            <div class="row">
                <div class="col col-3">
                    <input type="hidden" value="1">
                    <a href="javascript:;" id="zhiFubBao">
                        <img class="bd" src="/img/pay/zfb.jpg" style=""/>
                    </a>
                </div>
                <div class="col col-3">
                    <input type="hidden" value="2">
                    <a href="javascript:;" id="weiXin">
                        <img class="bd" src="/img/pay/weixin.jpg"/>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col col-3">
                    <input type="hidden" value="3">
                    <a href="javascript:;" id="jianShe">
                        <img class="bd" src="/img/pay/jsyh.jpg"/>
                    </a>
                </div>
                <div class="col col-3">
                    <input type="hidden" value="4">
                    <a href="javascript:;" id="nongYe">
                        <img class="bd" src="/img/pay/nyyh.jpg"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <form action="/order/setType" method="post">
        <input name="orderId" type="hidden" th:value="${orderPay.id}">
        <input name="payType" type="hidden" id="payType">
        <div class="bottom-panel">
            <button class="go-next ui-btn-theme">下一步</button>
        </div>
    </form>
</div>

<!--脚部-->
<div class="fatfooter"></div>

</body>

<script src="/layui/layui.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/icheck.min.js"></script>
<script src="/js/global.js"></script>
<script>

    layui.use(["layer", "laytpl", "form", "upload", "laypage"], function () {
        let laypage = layui.laypage,
            laytpl = layui.laytpl,
            $ = layui.jquery;

        $("#zhiFubBao").on("click", function () {
            console.log(111);
            let type = $(this).prev().val();
            console.log(type);
            $("#payType").val(type);
            $(".bd").css("border", "")
            $(this).children().css("border", "#ff0000 5px solid")
        })

        $("#weiXin").on("click", function () {
            console.log(222);
            let type = $(this).prev().val();
            console.log(type);
            $("#payType").val(type);
            $(".bd").css("border", "")
            $(this).children().css("border", "#ff0000 5px solid")
        })

        $("#jianShe").on("click", function () {
            console.log(333);
            let type = $(this).prev().val();
            console.log(type);
            $("#payType").val(type);
            $(".bd").css("border", "")
            $(this).children().css("border", "#ff0000 5px solid")
        })

        $("#nongYe").on("click", function () {
            console.log(444);
            let type = $(this).prev().val();
            console.log(type);
            $("#payType").val(type);
            $(".bd").css("border", "")
            $(this).children().css("border", "#ff0000 5px solid")
        })

    });

    $('.check').iCheck({
        radioClass: 'sty1-radio'
    });

</script>
</html>